<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/header.css">
    <script src="../libs/requirejs/require.min.js" data-main="../js/list"></script>
    <title>商品列表</title>
    <style>*{
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
    
    .hot{
        margin:0 auto;
        padding: 0;
        list-style: none;
        width: 1024px;
        /* border: 1px solid #000; */
        display: flex;
        flex-wrap: wrap;
    }
    
    .hot-item{
        width: 300px;
        height: 500px;
        margin-right: 5px;
    }
    
    .hot-item img{
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>
    <!-- 渲染商品的数据 -->
    <header></header>
    <div>
        <div>
            <ul class="hot">
                <!-- <li class="hot-item">
                    <div><img src="" alt=""></div>
                    <div>商品标题</div>
                    <div>
                        <span>价格</span>
                        <span>销量</span>
                    </div>
                </li>
                <li class="hot-item">
                    <div><img src="" alt=""></div>
                    <div>商品标题</div>
                    <div>
                        <span>价格</span>
                        <span>销量</span>
                    </div>
                </li>
                <li class="hot-item">
                    <div><img src="" alt=""></div>
                    <div>商品标题</div>
                    <div>
                        <span>价格</span>
                        <span>销量</span>
                    </div>
                </li>
                <li class="hot-item">
                    <div><img src="" alt=""></div>
                    <div>商品标题</div>
                    <div>
                        <span>价格</span>
                        <span>销量</span>
                    </div>
                </li>
                <li class="hot-item">
                    <div><img src="" alt=""></div>
                    <div>商品标题</div>
                    <div>
                        <span>价格</span>
                        <span>销量</span>
                    </div>
                </li>
                <li class="hot-item">
                    <div><img src="" alt=""></div>
                    <div>商品标题</div>
                    <div>
                        <span>价格</span>
                        <span>销量</span>
                    </div>
                </li>
                <li class="hot-item">
                    <div><img src="" alt=""></div>
                    <div>商品标题</div>
                    <div>
                        <span>价格</span>
                        <span>销量</span>
                    </div>
                </li>
                <li class="hot-item">
                    <div><img src="" alt=""></div>
                    <div>商品标题</div>
                    <div>
                        <span>价格</span>
                        <span>销量</span>
                    </div>
                </li> -->
            </ul>
        </div>
    </div>
    <footer></footer>

    <!-- 定义渲染商品项的模板 -->
    <script type="text/html" id="hot-template">
        {{each products prod}}
        <li class="hot-item" data-id ="{{prod.id}}">
            
            <div><a href="http://localhost:3000/html/detail.html"><img  class="image" src="{{prod.image}}" alt=""></a></div>
            <div class="title">{{prod.title}}</div>
            <div>
                <span class="price1">{{prod.price}}</span>
                &nbsp;
                销量：<span>{{prod.saleNum}}</span>
                &nbsp;
                <button class="add-to-cart">加入购物车</button>
            </div>
            
        </li>
        {{/each}}
    </script>

    <!-- 侧边购物车 -->
    <div class="side-bar">
        <div class="cart">购物车</div>
    </div>

</body>
</html>